import React,{Component} from 'react';
import Util from '../common/util'
import ImagePicker from 'react-native-image-picker'
import {
    View,
    Text,
    Image,
    StyleSheet,
    Dimensions,
    TouchableOpacity,
    ScrollView, Platform
} from 'react-native'
export default class selectPic extends Component{
    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {};
    }

    linkJump(component){
        this.props.navigation.push(component)
    }

    tokePhoto(){
        let that = this;
        const options = {
            title: '选择一张图片',
            cancelButtonTitle: '取消',
            takePhotoButtonTitle: '拍照',
            chooseFromLibraryButtonTitle: '从相册中选择',
            quality: 1.0,
            maxWidth: 500,
            maxHeight: 500,
            storageOptions: {
                skipBackup: true,
                cameraRoll:false
            }
        };
        ImagePicker.launchCamera(options, (response)=> {
            if (response.didCancel) {

            }
            else if (response.error) {

            }
            else if (response.customButton) {
            }
            else {
                let source;
                let imageName;
                let imagePath;

                if (Platform.OS === 'android') {
                    source = response.uri;
                    imagePath = response.path;
                    imageName = response.fileName;

                } else {
                    //{"uri":"/var/mobile/Containers/Data/Application/CC01D123-59FA-4205-8B27-C3181596AA5C/Documents/6131CE7A-FD8C-44DB-B9B9-82C322294B88.jpg","isStatic":true}
                    //file:///Users/dev/Library/Developer/CoreSimulator/Devices/DA8C975D-D476-462B-B387-D43FBC55C333/data/Containers/Data/Application/6231A942-22AA-40DC-A303-898EDE2C7533/Documents/2E98BCB0-8A9E-43FF-88E6-E7BE2094EE62.jpg
                    source = response.uri.replace('file://', '');
                    imagePath = response.uri.replace('file://', '');
                    imageName = that.getImageNameByIOS(response.uri);
                }
                that.toSelectFrame(source)
                // let imageinfo = [];
                // imageinfo['uri'] = source;//这个是给React-native Image组件显示图片用得地址;
                // imageinfo['imageName'] = imageName;//图片名称
                // imageinfo['imagePath'] = imagePath;//图片在本机的路径.
                // that.setState({
                //     default_image: imageinfo,
                // });
            }
        })
    }

    selectPic(){
        let that = this;
        const options = {
            title: '选择一张图片',
            cancelButtonTitle: '取消',
            takePhotoButtonTitle: '拍照',
            chooseFromLibraryButtonTitle: '从相册中选择',
            quality: 1.0,
            maxWidth: 500,
            maxHeight: 500,
            storageOptions: {
                skipBackup: true,
                cameraRoll:false
            }
        };
        ImagePicker.launchImageLibrary(options, (response)=> {
            if (response.didCancel) {

            }
            else if (response.error) {

            }
            else if (response.customButton) {
            }
            else {
                let source;
                let imageName;
                let imagePath;

                if (Platform.OS === 'android') {
                    source = response.uri;
                    imagePath = response.path;
                    imageName = response.fileName;

                } else {
                    //{"uri":"/var/mobile/Containers/Data/Application/CC01D123-59FA-4205-8B27-C3181596AA5C/Documents/6131CE7A-FD8C-44DB-B9B9-82C322294B88.jpg","isStatic":true}
                    //file:///Users/dev/Library/Developer/CoreSimulator/Devices/DA8C975D-D476-462B-B387-D43FBC55C333/data/Containers/Data/Application/6231A942-22AA-40DC-A303-898EDE2C7533/Documents/2E98BCB0-8A9E-43FF-88E6-E7BE2094EE62.jpg
                    source = response.uri.replace('file://', '');
                    imagePath = response.uri.replace('file://', '');
                    imageName = that.getImageNameByIOS(response.uri);
                }
                that.toSelectFrame(source)
                // let imageinfo = [];
                // imageinfo['uri'] = source;//这个是给React-native Image组件显示图片用得地址;
                // imageinfo['imageName'] = imageName;//图片名称
                // imageinfo['imagePath'] = imagePath;//图片在本机的路径.
                // that.setState({
                //     default_image: imageinfo,
                // });
            }
        })
    }

    getImageNameByIOS(imageUri) {
        if (imageUri != "") {
            var names = imageUri.split("/");
            return names[names.length - 1];
        }
    }

    toSelectFrame(uri){
       this.props.navigation.push("SetPicWidth",{
           image_url:uri
       })
    }


    render(){
        return(
            <View style={{flex:1,backgroundColor:"#fff"}}>
                <ScrollView style={{flex:1}}>
                    <View style={{alignItems:"center",justifyContent:'center',paddingVertical:50}}>
                        <Image
                            source={require('../imgs/frmae_icon4.png')}
                            resizeMode={'cover'}
                            style={{width:Util.size.width*0.8,height:Util.size.width*0.8}}
                        />
                    </View>
                    <View style={{alignItems:'center',justifyContent:'center',paddingBottom:40}}>
                        <TouchableOpacity style={styles.select_btn} onPress={()=>this.tokePhoto()}>
                            <Image
                                source={require('../imgs/frmae_icon3.png')}
                                resizeMode={'cover'}
                                style={{width:20,height:20,marginRight:5,marginLeft:20}}
                            />
                            <Text style={{fontSize:14,color:"#696969"}}>拍摄图片</Text>
                        </TouchableOpacity>
                        <TouchableOpacity style={styles.select_btn} onPress={()=>this.selectPic()}>
                            <Image
                                source={require('../imgs/frmae_icon1.png')}
                                resizeMode={'cover'}
                                style={{width:20,height:20,marginRight:5,marginLeft:20}}
                            />
                            <Text style={{fontSize:14,color:"#696969"}}>手机相册</Text>
                        </TouchableOpacity>
                        <TouchableOpacity style={styles.select_btn} onPress={()=>this.linkJump('MaterialBank')}>
                            <Image
                                source={require('../imgs/frmae_icon2.png')}
                                resizeMode={'cover'}
                                style={{width:20,height:20,marginRight:5,marginLeft:20}}
                            />
                            <Text style={{fontSize:14,color:"#696969"}}>素材库</Text>
                        </TouchableOpacity>
                    </View>
                </ScrollView>
            </View>
        )
    }
}
var styles = StyleSheet.create({
    select_btn:{
        width:130,
        height:50,
        flexDirection:"row",
        alignItems:'center',
        borderWidth:1,
        borderColor:"#e0e0e0",
        marginBottom:15
    }
})